<template>
	<view class="member-index bggray">

		<view v-if="info" class="card-item color-white w-100 mb40">
			<image :src="info.image" class="img"></image>
			<view class="title">{{info.name}}</view>
			<view class="content">最高可打水<text class="fs32">{{info.max_water}}</text>升</view>
		</view>

		<scroll-view v-else scroll-x class="no-wrap mb40">
			<view class="card-item mr20 flex flex-dc flex-sb" v-for="(item,index) in list" :key="index"
				@click="changeCard(item)">
				<image :src="item.image" class="img"></image>
				<view class="title">齐鲁臻源 白银会员</view>
				<view class="content">最高可打水<text class="fs32">7.5</text>升</view>
			</view>
		</scroll-view>


		<view class="mb20 fwb">会员卡说明</view>

		<scroll-view scroll-y class="name-color aj" style="height:590rpx;">{{content}}</scroll-view>



		<view class="btn-group-bom fs28">
			<view class="flex flex-ver flex-sb" v-if="$common._empty(info)">
				<view class="btn mr20" @click="$common.navTo('/pages/member/exchange')">输入兑换码</view>
				<view class="btn gradient">￥{{price}} 立即开通</view>
			</view>
			<view class="time-btn" v-else>有效期至{{info.end_time}}</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import { toLogin } from '@/libs/login.js';
	// import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
    computed: mapGetters(['isLogin']),
		data() {
			return {
				content: '',
				price: 0,
				loadingType: '', //加载更多status
				list: [],
				info: {},
			}
		},
		components: {

		},
		onLoad(query) {

      if (!this.isLogin) return toLogin();
		},
		async onShow() {
			await this.getInfo();
			if (this.$common._empty(this.info)) await this.getList();
		},
		mounted() {},
		methods: {
			changeCard(item) {
				this.price = item.price;
				this.content = item.content;
			},
			async getInfo() {
				const res = await this.$http({
					method: 'get',
					url: this.$api.vipInfo,
					data: {

					},
				});
				this.info = res.data;
				if(!this.$common._empty(this.info)) this.content = this.info.content;

			},
			async getList() {
				// if (this.loadingType === "noMore") {
				// 	//防止重复加载
				// 	return;
				// }

				const res = await this.$http({
					method: 'get',
					url: this.$api.vipList,
					data: {
						// page: this.page++,
					},
				});

				this.list = [...this.list, ...res.data];
				this.content = this.list[0].content;

				// if (res.data.datas.length < 20) {
				// 	this.loadingType = "noMore"
				// } else {
				// 	this.loadingType = "more"
				// }

			}
		}
	}
</script>

<style lang="scss">
	.member-index {
		height: 100vh;
		padding: 20rpx 30rpx;

		.card-item {
			width: 577rpx;
			height: 222rpx;
			padding: 20rpx 40rpx;
			display: inline-block;
			position: relative;

			.img {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}

			.title {
				position: absolute;
				top: 20rpx;
				left: 40rpx;
			}

			.content {
				position: absolute;
				bottom: 20rpx;
				left: 40rpx;
			}
		}

		.level3 {
			color: #fff;
			background: url($baseUrl + '/img/member/03@2x.png') no-repeat center / 100% 100%;
		}

		.level4 {
			background: url($baseUrl + '/img/member/04@2x.png') no-repeat center / 100% 100%;
		}

		.btn-group-bom {
			position: absolute;
			width: 706rpx;
			bottom: 100rpx;
			left: 50%;
			transform: translateX(-50%);

			.time-btn {
				@include operation-btn(100%, 97rpx, '', #fff, 49rpx, 0);
			}

			.btn {
				width: 335rpx;
				height: 98rpx;
				line-height: 88rpx;
				background: #FFFFFF;
				border-radius: 49rpx;
				border: 2px solid #F5F5F5;
				font-weight: bold;
			}

			.gradient {
				color: #fff;
				background: linear-gradient(-90deg, #37A9FF, #6DFFFF);
			}
		}
	}
</style>
